<?php
$cssfiles = '
	<link rel="stylesheet" type="text/css" href="' . Typecho_Common::url('css/reset.source.css?v=' . $suffixVersion, $options->adminUrl) . '" /> 
	<link rel="stylesheet" type="text/css" href="' . Typecho_Common::url('css/grid.source.css?v=' . $suffixVersion, $options->adminUrl) . '" /> 
	<link rel="stylesheet" type="text/css" href="' . Typecho_Common::url('css/typecho.source.css?v=' . $suffixVersion, $options->adminUrl) . '" />';

$scriptfiles = '
	<script type="text/javascript" src="'. Typecho_Common::url('javascript/mootools.js', $options->adminUrl) .'"></script>
	<script type="text/javascript" src="'. Typecho_Common::url('Tyupoo/js/Pmoo/Pmoo.js', $options->pluginUrl) .'"></script>
	<script type="text/javascript" src="'. Typecho_Common::url('Tyupoo/js/Pmoo/Pmoo.Pager2.js', $options->pluginUrl) .'"></script>
';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Yupoo!-相册</title>
        <? echo $cssfiles;?>
		<style>
			.tyupoo_img_list{
				padding:5px;
				height:200px;
				width:100%;
			}
			.tyupoo_img_list ul li{
				float:left;
				margin:5px 5px 5px 7px;
			}
			.tyupoo_img_list ul li img{
				width:75px;
				height:75px;
			}
			.tyupoo_img_list ul li a img{
				border:3px #fff solid;
			}
			.tyupoo_img_list ul li a:hover img{
				border:3px #ccc solid;
			}
			.typecho-pager-content a.active{
				background:#E47E00 none repeat scroll 0 0;
			}
			.typecho-pager-content a.disable{
				background:#DEE4C5 none repeat scroll 0 0;
			}			
		</style>
		<?php echo $scriptfiles; ?>
	</head>
	<body>
		<div class="main">
			<div>
				<ul class="typecho-option-tabs">
					<li class="current"><a href="#" onclick="return false;">相册</a></li>
					<li><a href="<?php echo $out['urlUpload']; ?>">上传</a></li>
				</ul>
			</div>
			
			<div>
				<div>
					<?php include 'common/album_selector.php'; ?>
					<script type="text/javascript">
						$('tyupoo_album_select').addEvent('change', function(){
							var aid = this.value;
							window.location.href = '<?php echo $out['urlAlbum']; ?>&aid='+aid;
						});
					</script>
				</div>				
			</div>
				
			<div>
				<div class="tyupoo_img_list">
					<ul>
						<!--
						<li><a href="#"><img src="http://photo.yupoo.com/sgwannabe/332457f31f61/square/"/></a></li>
						-->
					</ul>
				</div>
			</div>
			<div class="typecho-pager">
				<div class="typecho-pager-content">
					<ul>
						<li class="current"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
					</ul>
				</div>
			</div>			
		</div>
		<script type="text/javascript">
		(function(){
			var photos = <? echo $out['photoListJson']; ?>;
			
			function getThumb(photo){
				var url = ['http://pic.yupoo.com/', photo['dir'], '/', photo['filename'], '/square.jpg'].join('');
				return url;
			}
			
			function getMedium(photo){
				var url = ['http://pic.yupoo.com/', photo['dir'], '/', photo['filename'], '/medium.jpg'].join('');
				return url;
			} 
			
			window.insertToEditor = function(url, title){
				try{
					top.insertImageToEditor(title, url, url);
				}catch(e){}
				return false;
			};
			
			function showPhotoPage(p){
				if (!photos || photos[0] == null){
					$$('div.tyupoo_img_list ul').html('No Photoes.');
					return;
				}
				var start = (p - 1) * 8;
				var end = start + 8;
				var toshow = photos.slice(start, end);
				var imgHtml = [];
				var liHtml = '';
				var photo = null;
				for (var i=0,len=toshow.length;i<len;i++){
					photo = toshow[i];
					liHtml = [
						'<li><a href="#" ',
						'onclick="return insertToEditor(\'',getMedium(photo),'\', \'',photo['title'],'\');">',
						'<img src="',getThumb(photo),'" title="',photo['title'],'"/></a></li>'].join('');
					imgHtml.push(liHtml);
				}
				imgHtml = imgHtml.join('');
				//alert(imgHtml);
				$$('div.tyupoo_img_list ul').html(imgHtml);
			}
			Pmoo.Pager2.factory('div.typecho-pager-content ul',<?php echo $out['photoPages']; ?>, 1, {
				'click' : function(p){
					showPhotoPage(p);
				}
			});
			
			showPhotoPage(1);
		})();
		</script>
	</body>
</html>